<script setup>
import { ref } from 'vue';
const companys = ref([
  {
    name: 'smd',
    img: '../../../assets/images/smd.png',
    link: 'https://en.sumec.com/'
  },
  {
    name: 'aj',
    img: '../../../assets/images/aj.png',
    link: 'https://anji-logistics.e-ciie.com/index.html'
  },
  {
    name: 'zg',
    img: '../../../assets/images/zg.png',
    link: 'https://en.coscoshipping.com/'
  },
]);
const requireImage = (url) => {
  return new URL(url, import.meta.url).href
}
const toHref = (url) => {
  window.open(url, '_blank');
}
</script>
<template>
  <div class="agent-client">
    <div class="title">Agent Client</div>
    <div class="text">
      Our proxy clients are professional, efficient, and provide very strong guarantee services for our clients.
    </div>
    <div class="picture">
      <img v-for="item in companys" :key="item.name" :src="requireImage(item.img)" :alt="item.link" @click="toHref(item.link)" />
    </div>
    <div class="person">
      <img src="@/assets/images/person.png" alt="">
    </div>
  </div>
</template>
<style lang="scss" scoped>
.agent-client {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 99;
  .title {
    font-weight: bold;
    font-size: 32px;
    color: #333;
    transform: translate(0px, -50%);
  }

  .text {
    width: 622px;
    font-size: 16px;
    color: #666666;
    line-height: 22px;
  }
  .picture{
    display: flex;
    transform: translate(-24px, 0px);
    margin: 43px 0px 0px 0px;
    img{
      width: 227px;
      height: 167px;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .person{
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: -1;
    img{
      width: 669px;
      height: 447px;
    }
  }
}
</style>
